<template>
    <el-select
        :model-value="selectedInput.type"
        @update:model-value="onChangeType"
        class="mb-3"
    >
        <el-option
            v-for="(input, index) in inputsType"
            :key="index"
            :label="input.type"
            :value="input.type"
        />
    </el-select>
    <TaskObject
        v-loading="loading"
        name="root"
        :model-value="selectedInput"
        @update:model-value="updateSelected($event, selectedIndex)"
        :schema="inputSchema?.schema?.properties"
        :properties="inputSchema?.schema?.properties?.properties"
        :definitions="inputSchema?.schema?.definitions"
        metadata-inputs
    />

    <Save @click="update" what="input" class="w-100 mt-3" />
</template>

<script setup>
    import TaskObject from "./tasks/TaskObject.vue";
    import Save from "../code/components/Save.vue";
</script>

<script>
    import {mapState, mapGetters} from "vuex";
    import {BREADCRUMB_INJECTION_KEY, PANEL_INJECTION_KEY} from "../code/injectionKeys";

    export default {
        emits: ["update:modelValue"],
        props: {
            modelValue: {
                type: Object,
                default: () => {},
            },
            inputs: {
                type: Array,
                default: () => [],
            },
            label: {type: String, required: true},
            selectedIndex: {type: Number, required: true},
            required: {type: Boolean, default: false},
            disabled: {type: Boolean, default: false},
        },
        computed: {
            ...mapState("plugin", ["inputSchema", "inputsType"]),
            ...mapGetters("flow", ["flowYamlMetadata"]),
        },
        created() {
            if (this.inputs && this.inputs.length > 0) {
                this.newInputs = this.inputs;
            }

            this.selectedInput = this.modelValue ?? {type: "STRING"};

            this.$store
                .dispatch("plugin/loadInputsType")
                .then((_) => (this.loading = false));
        },
        data() {
            return {
                newInputs: [{type: "STRING"}],
                selectedInput: undefined,
                loading: false,
            };
        },
        inject:{
            panel: {from: PANEL_INJECTION_KEY},
            breadcrumbs: {from: BREADCRUMB_INJECTION_KEY}
        },
        methods: {
            selectInput(input) {
                this.selectedInput = input;
                this.loadSchema(input.type);
            },
            getCls(type) {
                return this.inputsType.find((e) => e.type === type).cls;
            },
            getType(cls) {
                return this.inputsType.find((e) => e.cls === cls).type;
            },
            loadSchema(type) {
                this.loading = true;

                this.$store
                    .dispatch("plugin/loadInputSchema", {type: type})
                    .then((_) => (this.loading = false));
            },
            update() {
                if (
                    this.newInputs.map((e) => e?.id).length !==
                    new Set(this.newInputs.map((e) => e?.id)).size
                ) {
                    this.$store.dispatch("core/showMessage", {
                        variant: "error",
                        title: this.$t("error"),
                        message: this.$t("duplicate input id"),
                    });
                } else {
                    this.panel = undefined;
                    this.breadcrumbs.pop();
                    const value = this.newInputs.filter(input => input?.id);
                    this.$emit("update:modelValue", value.length ? value : undefined);
                }
            },
            updateSelected(value) {
                if (this.selectedIndex >= 0) {
                    this.newInputs[this.selectedIndex] = value;
                    this.$emit("update:modelValue", [...this.newInputs]);
                }
            },
            deleteInput(index) {
                this.newInputs.splice(index, 1);
            },
            addInput() {
                this.newInputs.push({type: "STRING"});
            },
            onChangeType(type) {
                this.newInputs[this.selectedIndex].type = type;
                this.loadSchema(type);
            },
        },
    };
</script>

<style scoped lang="scss">
@import "../../components/code/styles/code.scss";
</style>
